<template>
  <div class="address">
    <div class="address-header">
       <router-link to="/setting" tag="span">
          <van-icon name="arrow-left" />
        </router-link>
      <span>收货地址</span>
      <span></span>
    </div>
    <van-address-list
    :list="list"
    v-model="chosenAddressId"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
    />
  </div>
</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';
import { Toast } from 'vant';

Vue.use(AddressList);


export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [
      ],
    };
  },
  created(){
    this.list = this.$store.state.addList
  },
  methods: {
    onAdd() {
      this.$router.push('/add-address')
    },
    onEdit(item, index) {
      Toast('编辑地址:' + index);
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '../assets/border.styl'
.address 
  height 100%
  background-color #f2f2f2
  margin-bottom .44rem
  .address-header
        width 100%
        height .88rem
        font-size .3rem
        background-color #fff
        display flex 
        justify-content space-between
        align-items center
        $border(0 0 1px 0,#eee)
  .van-address-list 
    $border(0 0 1px 0,#eee)
    .van-button--danger {
        color: #fff;
        background-color: #794DFA;
        border: 1px solid #794DFA;
    }
    .van-tag--danger {
        background-color: #794DFA;
    }
    .van-address-item .van-radio__icon--checked .van-icon .van-icon-success{
        background-color: #794DFA;
        border-color: #794DFA;
    }
</style>
<style lang="css">
.van-address-item .van-radio__icon--checked .van-icon .van-icon-success{
    background-color: #794DFA;
    border-color: #794DFA;
}
.van-address-list__bottom{
  background-color: #f2f2f2;
}
</style>